﻿<template>
  <div>
    <el-dialog v-drag :title = 'dialogSearchTitle' :visible.sync = 'dialogSearchVisible' :width = 'dialogWidth'
    :before-close = 'closeDialog' :close-on-click-modal = 'false'>
      <el-form :model = 'searchForm' :rules = 'rules' ref = 'ruleForm' label-width = '146px'>
        <el-form-item label = '查询模式：' prop = 'mode'>
          <el-select v-model = 'searchForm.mode' placeholder = '请选择'>
            <el-option value = 'Normal' label = '普通模式,翻页查询'></el-option>
            <el-option value = '1000' label = '抓取前1000笔资料'></el-option>
            <el-option value = 'All' label = '抓取所有资料'></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label = '过滤条件的栏位：'>
          <el-select v-model = 'searchForm.filter_column' placeholder = '请选择过滤条件的栏位名称' clearable>
            <el-option v-for = 'val in cloumnList' :key = 'val.indexName'
            :value = 'val.indexName' :label = 'val.text'></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label = '过滤条件操作符：'>
          <el-select v-model = 'searchForm.filter_op' placeholder = '请选择过滤条件操作符' clearable>
            <el-option label = '等于' value='eq'></el-option>
            <el-option label = '大于等于' value='gte'></el-option>
            <el-option label = '小于' value='lt'></el-option>
            <el-option label = '小于等于' value='lte'></el-option>
            <el-option label = '模糊比对' value='like'></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label = '过滤条件的值：'>
          <el-input v-model = 'searchForm.filter_value' placeholder = '请输入过滤条件的值' clearable></el-input>
        </el-form-item>
      </el-form>
      <span slot = "footer">
        <el-button type = "info" @click = "handleClose('ruleForm')">取 消</el-button>
        <el-button type = "primary" @click = "handleSubmit('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ['cloumnList', 'searchInfo', 'mode', 'showSearchData'],
  data () {
    return {
      dialogSearchVisible: false,
      dialogSearchTitle: '检索数据',
      dialogWidth: '40%',
      searchForm: {
        filter_column: '',
        mode: 'Normal',
        filter_op: '',
        filter_value: ''
      },
      rules: {
        filter_column: [
          {required: true, message: '过滤条件的栏位名称不能为空', trigger: 'change'}
        ],
        mode: [
          {required: true, message: '查询模式不能为空', trigger: 'change'}
        ],
        filter_op: [
          {required: true, message: '过滤条件的操作符号不能为空', trigger: 'change'}
        ],
        filter_value: [
          {required: true, message: '过滤条件的值不能为空', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    // 点击上部的X关闭弹窗时
    handleClose (forms) {
      this.$refs[forms].resetFields()
      this.$emit('giveUpSearch')
    },
    closeDialog () {
      this.$refs.ruleForm.clearValidate()
      this.$emit('giveUpSearch')
    },
    // 点击确定按钮时
    handleSubmit (forms) {
      this.$refs[forms].validate((valid) => {
        if (valid) {
          this.$emit('sureSearch', this.searchForm)
        } else {
          return false
        }
      })
    }
  },
  watch: {
    showSearchData: {
      handler: function (val, oldVal) {
        this.dialogSearchVisible = val
        if (val) {
          this.searchForm.mode = this.mode
          this.searchForm.filter_op = this.searchInfo.filter_op
          this.searchForm.filter_value = this.searchInfo.filter_value
          this.searchForm.filter_column = this.searchInfo.filter_column
        }
      },
      deep: true
    }
  }
}
</script>
